<template>
  <div class="comment-container">
    <div style="height: 10px"></div>
    <div class="user-msg-container">
      <div class="user-msg-box">
        <img :src="message._user.avatar == undefined? require('../../../../img/logo.png'): message._user.avatar.fileServer + '/static/' + message._user.avatar.path" class="head-img">
        <div style="width: 5px; "></div>
        <div class="user-text-box">
          <div class="user-name">
            <label-plus :text="message._user.title" ></label-plus>
            <label-plus :text="'Lev'+message._user.level" ></label-plus>
          </div>
          <div class="user-name">
            <div style="width: 3px;"></div>
            {{message._user.name}}
          </div>
        </div>
      </div>

    </div>
    <div style="height: 10px"></div>
    <div class="comment-contain-box">
      <div class="comment-contain">
        {{ message.content }}
      </div>
    </div>
    <div style="height: 10px"></div>
    <div class="like-container">
      <div class="like-box">
        <div style="display: flex">
          <img src="../../../../img/zan.png" style="width: 25px; height: 25px" @touchstart="like">
          <div class="like-text">{{ message.likesCount }}</div>
        </div>
        <div class="like-text">
          {{ message.created_at }}
        </div>
      </div>
    </div>
    <div style="height: 3px; width: 100%; background-color: #f1929d"></div>
  </div>
</template>

<script>
import labelPlus from "@/components/main/part/label";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "comment",
  props:["message"],
  setup() {
    function like() {
      alert("暂未实现")
    }

    return {
      like
    }
  },
  components:{
    labelPlus
  }
}
</script>

<style scoped>
  .comment-container {
    width: 100%;
    height: auto;
  }

  .user-msg-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-msg-box {
    width: 94%;
    height: 90%;
    display: flex;
  }

  .head-img {
    width: 45px;
    height: 100%;
    border-radius: 3px;
  }

  .user-text-box {
    width: calc(100% - 50px);
    height: 100%;
  }

  .user-name {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
  }

  .comment-contain-box {
    position: relative;
    width: 94%;
    left: 3%;

  }

  .comment-contain {
    width: 100%;
    word-wrap: break-word;
    word-break: normal;
    font-size: large;
  }

  .like-container {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .like-box {
    width: 94%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .like-text {
    display: flex;
    align-items: center;
  }
</style>